<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="https://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

    <script type="text/javascript">
        /*
    基本
    show([speed,[easing],[fn]])
    hide([speed,[easing],[fn]])
    toggle([speed],[easing],[fn])
    滑动
    slideDown([spe],[eas],[fn])
    slideUp([speed,[easing],[fn]])
    slideToggle([speed],[easing],[fn])
    淡入淡出
    fadeIn([speed],[eas],[fn])
    fadeOut([speed],[eas],[fn])
    fadeTo([[spe],opa,[eas],[fn]])
    fadeToggle([speed,[eas],[fn]])
    */
        function fun1() {
            alert('事件结束后调用的方法');
        }

        $(function () {
            $('#btn1').click(function () {
                // $("#div1").show("slow");
                $("#div1").show(2000, fun1);
            });
            $('#btn2').click(function () {
                $("#div1").hide('fast', fun1);
            });
            $('#btn3').click(function () {
                $("#div1").toggle('fast', fun1);
            });
            $('#btn4').click(function () {
                $("#div1").fadeIn('fast', fun1);
            });
            $('#btn5').click(function () {
                $("#div1").fadeOut('fast', fun1);
            });
            $('#btn6').click(function () {
                $("#div1").fadeTo('fast', 0.2, fun1);
            });
            $('#btn7').click(function () {
                $("#div1").fadeToggle("slow", "swing");
            });


        });
    </script>

</head>
<body>
<table style="float: left;">
    <tr>
        <td>
            <button id="btn1">显示show()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn2">隐藏hide()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn3">显示/隐藏切换 toggle()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn4">淡入fadeIn()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn5">淡出fadeOut()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn6">淡化到fadeTo()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn7">淡化切换fadeToggle()</button>
        </td>
    </tr>
</table>

<div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
    jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
</div>
</body>

</html>
